/*Fonts til programmet fra google fonts*/

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500&display=swap');
#side {
  background-color: #101016;
}


/*----------------------------------------------- Top -----------------------------------------------*/

#nav ul, li, a {
  /*Ingen strej under links*/
  text-decoration: none;
  /*Laver teksten hvid*/
  color: #d6d8da;
  font-family: "Karla", sans-serif;
  font-weight: 500;
  font-size: 19px;
  align-items: center;
  /*Mellemrum mellem kasserne
  margin-left: 1px;*/
  /*border-style: solid;*/
}

/*Bruger div'ens id hoved til kun at ændre i den*/

#hoved {
  /*background-color: aliceblue;*/
  font-family: "Karla", sans-serif;
  font-weight: 500;
  font-size: 19px;
  color: #bcbdc7;
  /**/
  display: flex;
  position: fixed;
  /**/
  justify-content: space-between;
  /**/
  align-items: center;
  /*30 pixel til top of bund*/
  padding: 30px 10%;
  border-style: none;
  height: 50px;

  background: linear-gradient(45deg,#030929,#11111d);


  /*For at få den til at fylde hele toppen af skræmen */
  width: 80%;
  margin-top: -11px;
  margin-left: -11px;
}

#hoved h1 {
  /*For at få navigation og navnet til at være på en linje*/
  margin-block-end: 15px;
}

#nav ul {
  /*Fjerner prikkerne*/
  list-style: none;
}

#nav li ul {
  /*Gør så man ikke kan se undertitlerne*/
  display: none;
}

#nav li:hover ul {
  /*Viser undertitler når man hover over dem*/
  display: block;
  /*De har en position på skærmen*/
  position: absolute;
}

#nav li:hover li {
  /*Det bliver en lodret under menu*/
  float: none;  
  /*Mellemrum til under links*/
  margin-top: 15px;
  /*Skuber undermenuen til venstre*/
  margin-left: -58px;
}

#nav ul li {
  /*Lader dem fylde en linje*/
  float: left;
  padding: 0px 20px;
}

#nav li a {
  /*Når man har musen over den sker der først noget efter 0.3s, hvor det langsomt kommer ind, her farven når man hover*/
  transition: all 0.3s ease 0s;
}

#nav li a:hover {
  color: #1b5392;
}

/*----------------------------------------------- Side inhold -----------------------------------------------*/

#indhold {
  /*---------Position---------*/
  height: 3000px;
  /*Så den bliver i midten af skærmen og den er ikke så stor*/
  width: 69%;
  margin: auto;
  /*så den ikke starter oven i headeren */
  padding-top: 100px;
  border-style: solid;
  border-color: #9dfdf5;

  /*---------Tekst---------*/
  font-family: "Karla", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #e9ebff;

}

#indhold p {
  font-size: 20px;
}


#overskrift {
  font-weight: 500;
  font-size: 42px;
  /*border-style: solid;*/
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg,#001231,#559999);
}


/*----------------------------------------------- Table -----------------------------------------------*/
#tabel {
  /*background: linear-gradient(45deg,#b8d2ff,#93fdfd);*/
  background: linear-gradient(135deg,#f6c2f8,#e69ac6,#a8c4e6);
  color: #11111d;
  width:max-content;
  /*Gør kanterne */
  border-radius: 15px;
}

#tabel table {
  width: 600px;
}

#tabel th, td {
  padding: 7px 10px 10px 10px;
}

#tabel th {
  text-align: left;
  /*border-top: 2px solid #559999;*/
  border-bottom: 2px solid #01382a;
}

/*----------------------------------------------- Indputs -----------------------------------------------*/

#indtast {
  background: linear-gradient(45deg,#9af6b1,#9dfdf5,#94c4ff);
  color: #0c0e11;
  font-size: 18px;
  width: auto;
  text-align: center;
}

input[type=text] {
  border: none;
  background-color: #0dcfff49;
  
}

select {
  border: none;
  border: 5px solid;
  border-image-slice: 1;
  border-width: 4px;
  background-color: #1da0f25d;
  border-image-source: linear-gradient(45deg, #989fff, #ebabff);
}

input[type=submit] {
  border: none;
  border: 5px solid;
  border-image-slice: 1;
  border-width: 4px;
  background-color: #1da0f25d;
  border-image-source: linear-gradient(45deg, #509be2, #5226e2);
}

input[type=reset] {
  border: none;
  border: 5px solid;
  border-image-slice: 1;
  border-width: 4px;
  background-color: #1da0f25d;
  border-image-source: linear-gradient(45deg, #dd6af1, #5226e2);
}




/*----------------------------------------------- Fod -----------------------------------------------*/

#fod {
  /*height: 200px;*/
  border-style: none;
  padding: 30px 10%;
  display: flex;
  /**/
  justify-content: space-between;
  /**/
  align-items: center;

  /*Så den bliver på bunden af skærmen imens den fylder den helt ud*/
  margin-left: -11px;
  /*position: fixed;*/
  bottom: 0;
  width: 80%;
  margin-bottom: -1px;
}

#soc ul {
  /*Fjerner prikkerne*/
  list-style: none;
}

#soc ul li {
  /*Lader dem fylde en linje*/
  float: left;
  padding: 0px 20px;
}

#soc li a {
  /*Når man har musen over den sker der først noget efter 0.3s, hvor det langsomt kommer ind, her farven når man hover*/
  transition: all 0.3s ease 0s;
}

.twitter a:hover {
  color: #1da1f2;
}

.instagram a:hover {
  color: #c13584;
}

.facebook a:hover {
  color: #3b5998;
}

.youtube a:hover{
  color: #ff0000;
}